<template>
    <div class="about">
        <v-header/>
        <v-sidebar />
        <div class="content-box" :class="{ 'content-collapse': collapse }">
<!--	        {{tagsList}}-->
	        <v-tags></v-tags>
            <div class="content">
                <router-view v-slot="{ Component }">
                    <transition name="move" mode="out-in">
	                    <keep-alive :include="tagsList">
		                    <component :is="Component" />
	                    </keep-alive>
                    </transition>
                </router-view>
                <!-- <el-backtop target=".content"></el-backtop> -->
            </div>
        </div>
    </div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
import vHeader from "../components/Header.vue";
import vSidebar from "../components/Sidebar.vue";
import vTags from "../components/Tags.vue";
export default {
    components: {
        vHeader,
        vSidebar,
        vTags,
    },
    setup() {
        const store = useStore();
        const tagsList = computed(() =>
            store.state.tagsList.map((item) => item.name)
        );
        const tagsList2 = []
        const collapse = computed(() => store.state.collapse);
        return {
            tagsList,
	        tagsList2,
            collapse,
        };
    },
};
// <!--                        <keep-alive :include="tagsList">-->
// <!--                        </keep-alive>-->
</script>
